<template>
    <div class="demo-type" style="margin-top: 8px">
          <div>
      <el-avatar :icon="UserFilled" />
      <el-dropdown>
    <span class="el-dropdown-link" style="color: #000000">
            管理员
            <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="changepassword">修改密码</el-dropdown-item>
        <el-dropdown-item @click="tuichu">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
        </div>
          </div>
</template>

<script setup>
import { UserFilled } from '@element-plus/icons-vue'
import {useRouter} from 'vue-router'
const router = useRouter();
const tuichu = ()=>{
  router.push("/")
}

const changepassword = ()=>{
  router.push("/changepassword")
}
</script>


<style scoped>
.demo-type {
  display: flex;
}
.demo-type > div {
  flex: 1;
  text-align: right;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
.el-dropdown-link{
  padding-left: 8px;
  margin-top: 12px;
}
.el-col {
  text-align: center;
}  
</style>